<template>
  <div class="commonheader">
    <el-header>
      <el-row :gutter="24">
        <el-col :span="12"><div class="title">后台管理系统</div></el-col>
        <el-col :span="2" :offset="10">
          <div style="float: left">
            <el-avatar
              icon="el-icon-user-solid"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202105%2F29%2F20210529001057_aSeLB.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661928635&t=9091b33b573e69ae6c6352eb8cb20f62"
            ></el-avatar>
          </div>
          <div>
            <el-dropdown @command="handleCommand">
              <span
                class="el-dropdown-link"
                style="color: white; font-size: medium"
              >
                {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">修改密码</el-dropdown-item>
                <el-dropdown-item command="2">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码" prop="currenpwd">
            <el-input
              type="password"
              v-model="ruleForm.currenpwd"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-dialog>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "commonheader",
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入的新密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      name: "",
      dialogFormVisible: false,
      ruleForm: {
        currenpwd: "Test_123456",
        pass: "Test_123456",
        checkPass: "Test_123456",
      },
      changePassword: {
        ID: "",
        currentPassword: "",
        newPassword: "",
      },
      rules: {
        currenpwd: [{ validator: validatePass1, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  created() {
    this.name = localStorage.getItem("username");
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.changePassword.ID = localStorage.getItem("userid");
          this.changePassword.currentPassword = this.ruleForm.currenpwd;
          this.changePassword.newPassword = this.ruleForm.checkPass;
          this.service
            .post("/auth/api/Login/ChangePassword", this.changePassword)
            .then((res) => {
              if (res.status == 200) {
                this.$notify({
                  title: "成功",
                  message: this.name + "修改密码成功！",
                  type: "success",
                });
                this.$router.push("/login");
              }
            })
            .catch((err) => {
              // console.log(err.response.data);
              this.$notify({
                title: "报错",
                message: err.response.data,
                type: "error",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCommand(command) {
      if (command == "1") {
        this.dialogFormVisible = true;
      }
      if (command == "2") {
        this.service.get("/auth/api/Login/LoginOutSelf").then((res) => {
          localStorage.setItem("token", "");
          this.$router.push("/login");
          // this.$message(this.name + "退出登录！");
          this.$notify({
            title: "成功",
            message: this.name + "退出登录！",
            type: "success",
          });
        });
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.commonheader {
  .el-header {
    background: #0fa0cc;
    color: white;
    line-height: 60px;
    // display: flex;
    justify-content: space-between;
    .title {
      width: 200px;
      font-size: 24px;
    }
    .el-row {
      .el-avatar {
        margin-top: 10px;
      }
    }
  }
}
</style>
